<template>
	<div>
		<el-button :size="size" :type="type" class="" :icon="isFullScreen ? 'el-icon-full-screen' : 'el-icon-close'" @click="onClickScreen"></el-button>
	</div>
</template>

<script>
    export default {
        name: 'FullScreenBtn',
        props: {
            className: {
                type: String,
                default: ''
            },
            type: {
                type: String,
                default: 'primary'
            },
            size: {
                type: String,
                default: 'mini'
            }
        },
        data() {
            return {
                isFullScreen: true
            };
        },
        methods: {
            onClickScreen() {
                const main = document.getElementsByClassName(this.className || 'app-main')[0];
                this.$emit('status', this.isFullScreen);
                this.isFullScreen = !this.isFullScreen;
                if (!this.isFullScreen) {
                    if (main.requestFullscreen) {
                        main.requestFullscreen();
                    } else if (main.mozRequestFullScreen) {
                        main.mozRequestFullScreen();
                    } else if (main.webkitRequestFullScreen) {
                        main.webkitRequestFullScreen();
                    } else if (main.msRequestFullscreen) {
                        main.msRequestFullscreen();
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                }
            }
        }
    };
</script>
